<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader";
const container = ref(null);
const modelType = ref(null)
const modelUrl = ref('')
let renderer = null, scene = null, camera = null, cube = null, controls = null;
const loadModel = () => {
    // console.log(modelUrl.value);
    // console.log(modelType.value);
    if(modelType.value === 'fbx') {
        const loader = new FBXLoader()
        loader.load(`${ modelUrl.value }`, model => {
            // console.log(model);
            scene.add(model)
        })
    } else if(modelType.value === 'gltf') {
        const loader = new GLTFLoader()
        loader.load(`${ modelUrl.value }`, model => {
            console.log(model);
            scene.add(model.scene)
        })
    } else if(modelType.value === 'obj') {
        const loader = new OBJLoader()
        loader.load(`${ modelUrl.value }`, model => {
            // console.log(model);
            scene.add(model)
        })
    }
}
const changeModelType = event => {
    // console.log(modelUrl);
    // console.log('设置内容：', event.target.value);
    modelType.value = event.target.value
}

// 创建立方体的几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建波浪效果的函数
function updateVertices() {
    const time = Date.now() * 0.001; // 时间参数，用于控制波浪的变化
    const frequency = 1; // 波浪频率
    const amplitude = 0.3; // 波浪振幅

    // 遍历立方体的顶点，应用波浪效果
    for (let i = 0; i < geometry.vertices.length; i++) {
        const vertex = geometry.vertices[i];
        vertex.z = Math.sin((vertex.x + time * frequency) * 2 * Math.PI) * amplitude;
    }

    // 标记几何体已更新
    geometry.verticesNeedUpdate = true;
}

// 创建立方体的材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });

// 创建立方体网格
const c = new THREE.Mesh(geometry, material);

//

// 模型动画执行
const startModelAnimation = () => {
    console.log(scene);
}

function init() {
    // 创建场景
    scene = new THREE.Scene();

    // 创建相机
    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.value.appendChild(renderer.domElement);
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
    controls.dampingFactor = 0.25;
    controls.screenSpacePanning = false;
    controls.maxPolarAngle = Math.PI / 2;
    const light = new THREE.AmbientLight( 0xffffff ); // 柔和的白光
    scene.add( light );

    scene.add(c);
}

function animate() {
    // 循环调用 animate 函数，实现动画效果
    requestAnimationFrame(animate);

    // 更新 OrbitControls
    controls.update();

    // updateVertices()

    // 渲染场景
    renderer.render(scene, camera);
}

onMounted(() => {
    init()
    animate()
})
</script>

<template>
  <div>
    <div class="handle-wrapper">
      <input type="text" v-model="modelUrl">
      <span class="load-model" @click="loadModel">载入模型</span>
      <span class="load-model" @click="startModelAnimation">模型动画</span>
      <select class="model-type" name="modelType" id="modelType" @change="changeModelType">
        <option value="gltf">GLTF</option>
        <option value="fbx">FBX</option>
        <option value="obj">OBJ</option>
      </select>
    </div>
    <div ref="container" class="container"></div>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
.container {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.handle-wrapper {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    .load-model {
        cursor: pointer;
        padding: 0 20px;
    }
    .model-type {

    }
}
</style>
